<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button v-auth="'setting:role:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
        <el-button v-auth="'setting:role:del:batch'" type="danger" plain icon="el-icon-delete"
                   :disabled="selection.length===0"
                   @click="batch_del"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <SailorTable ref="tableRef" :apiObj="Apis.api_setting.role.list" row-key="uuid"
                   @selection-change="selectionChange"
                   stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="唯一标识" prop="uuid" min-width="230" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createdAt" min-width="200" align="center"></el-table-column>
        <el-table-column label="角色名称" prop="roleName" min-width="150" align="center"></el-table-column>
        <el-table-column label="角色编码" prop="roleCode" min-width="150" align="center"></el-table-column>
        <el-table-column label="角色状态" prop="roleStatus" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.roleStatus===1?'success':'danger'">
              {{ scope.row.roleStatus === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="角色备注" prop="roleNotes" min-width="150"></el-table-column>
        <el-table-column label="角色排序" prop="roleSort" width="80"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="230">
          <template #default="scope">
            <el-button-group>
              <el-button v-auth="'setting:role:permission'" text type="primary" size="small"
                         @click="permission(scope.row, scope.$index)">权限设置
              </el-button>
              <el-button v-auth="'setting:role:info'" text type="primary" size="small"
                         @click="table_show(scope.row, scope.$index)">查看
              </el-button>
              <el-button v-auth="'setting:role:edit'" text type="primary" size="small"
                         @click="table_edit(scope.row, scope.$index)">编辑
              </el-button>
              <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                <template #reference>
                  <el-button v-auth="'setting:role:del'" text type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>

      </SailorTable>
    </el-main>
  </el-container>

  <save-dialog v-if="dialog.save" ref="saveRef" @success="handleSaveSuccess"
               @closed="dialog.save=false"></save-dialog>

  <permission-dialog v-if="dialog.permission" ref="permissionRef" :roleCode="selectRoleCode"
                     @closed="dialog.permission=false"></permission-dialog>

</template>

<script setup name="role">
import saveDialog from './save'
import permissionDialog from './permission'
import SailorTable from "@/components/SailorTable/index.vue";
import {nextTick, reactive, ref} from "vue";

import Apis from '@/api'
import {ElMessage, ElMessageBox} from "element-plus";

let selectRoleCode = ref('')
let dialog = reactive({
  save: false,
  permission: false
})
let selection = reactive([])
let search = reactive({
  keyword: null
})

let saveRef = ref()
let permissionRef = ref()
let tableRef = ref()


//添加
const add = () => {
  dialog.save = true
  nextTick(() => {
    saveRef.value.open('add')
  })
}
//编辑
const table_edit = (row) => {
  dialog.save = true
  nextTick(() => {
    saveRef.value.setData(JSON.parse(JSON.stringify(row)), 'edit')
  })
}
//查看
const table_show = (row) => {
  dialog.save = true
  nextTick(() => {
    saveRef.value.setData(JSON.parse(JSON.stringify(row)), 'show')
  })
}
//权限设置
const permission = (row) => {
  dialog.permission = true
  selectRoleCode = row.roleCode
  nextTick(() => {
    permissionRef.value.open()
  })
}
//删除
const table_del = async (row) => {
  var reqData = {uuid: row.uuid}
  var res = await Apis.demo.post.post(reqData);
  if (res.code === 0) {
    tableRef.value.refresh()
    ElMessage.success("删除成功")
  } else {
    await ElMessageBox.alert(res.message, "提示", {type: 'error'})
  }
}
//批量删除
const batch_del = async () => {
  ElMessageBox.confirm(`确定删除选中的 ${selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
    type: 'warning'
  }).then(() => {
    tableRef.value.refresh()
    ElMessage.success("操作成功")
  }).catch(() => {

  })
}
//表格选择后回调事件
const selectionChange = (select) => {
  selection = select
}
//搜索
const upsearch = () => {

}
//根据ID获取树结构
const filterTree = (id) => {
  var target = null;

  function filter(tree) {
    tree.forEach(item => {
      if (item.id === id) {
        target = item
      }
      if (item.children) {
        filter(item.children)
      }
    })
  }

  filter(tableRef.value.tableData)
  return target
}
//本地更新数据
const handleSaveSuccess = (data, mode) => {
  if (mode === 'add') {
    tableRef.value.tableData.unshift(data)
  } else if (mode === 'edit') {
    tableRef.value.tableData.filter(item => item.uuid === data.uuid).forEach(item => {
      Object.assign(item, data)
    })
  }
}

</script>

<style>
</style>
